<template>
  <div class="card" @click="getDetail">
    <div class="cover-image">
      <el-image class="img" :src="imageUrl" />
    </div>
    <div class="content">
      <span class="title">{{ card.title }}</span>
      <div class="user-info">
        <div class="user-details">
          <img :src="avatar" class="avatar" />
          <span class="user-name">{{ card.username }}</span>
        </div>
        <div class="likes">
          <button @click.stop="toggleLike" class="like-button" :class="{ liked: likeState }">
            <font-awesome-icon :icon="['far', 'heart']" v-if="!likeState" />
            <font-awesome-icon :icon="['fas', 'heart']" v-else />
          </button>
          <span class="like-count">{{ likeCount }}</span>
        </div>
      </div>
      <div class="tags" v-if="card.tags.length > 0">
        <Tag v-for="tag in card.tags" :key="tag">{{ tag }}</Tag>
      </div>
    </div>
  </div>
</template>

<script setup>
import Tag from './Tag.vue'
import { ref, onMounted } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { thumbsUp } from '@/api/forum'
import { getFile } from '@/utils/fileutils'

const props = defineProps({
  obj: Object,
})

// 头像信息
const avatar = ref('')

// 图片资源
const imageUrl = ref('')

// 处理文件资源
onMounted(async () => {
  avatar.value = await getFile(props.obj.avatar)
  imageUrl.value = await getFile(props.obj.imageUrl)
})

const emit = defineEmits(['getDetail'])

const card = props.obj

// 点赞数量
const likeCount = ref(card.liked)

// 点赞状态
const likeState = ref(false)

// 判断当前用户是否点赞过
const initFavorite = () => {
  likeState.value = card.favorite
}

initFavorite()

// 点赞
const toggleLike = async () => {
  likeState.value = !likeState.value
  const { data } = (await thumbsUp(card.id)).data
  // 获取改记录总体点赞数量
  likeCount.value = data
}

// 点开详细页
const getDetail = () => {
  emit('getDetail', card.id)
}
</script>

<style scoped less="scss">
.card {
  max-height: 1100px;
  margin: 1%;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  /* 淡阴影 */
  transition: all 0.3s ease;
  /* 平滑过渡 */
  border-radius: 8px;
  cursor: pointer;

  .cover-image {
    width: 100%;
    height: auto;

    .img {
      position: relative;
      width: 100%;
      height: auto;
      border-radius: 5px;
    }

    .img::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      background-size: 100% 100%;
      border-radius: 5px;
      /* 确保伪元素也有圆角 */
      transition: background-color 0.3s;
      /* 添加一个平滑过渡效果 */
      z-index: 1;
    }

    .img:hover::before {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 5;
    }
  }

  .content {
    padding: 10px;

    .title {
      display: block;
      font-size: 15px;
      color: gray;
      margin-bottom: 15px;
    }

    .user-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .user-details {
        display: flex;
        align-items: center;

        .avatar {
          width: 30px;
          height: 30px;
          border-radius: 30px;
          margin-right: 10px;
        }
      }

      .likes {
        font-size: 0.9em;
        display: flex;
        align-items: center;

        .like-button {
          background: none;
          border: none;
          cursor: pointer;
          font-size: 1.2em;
          color: #333;
        }

        .like-button.liked {
          color: red;
        }

        .like-count {
          margin-left: 5px;
        }
      }
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      gap: 5px;
    }
  }
}

.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
</style>
